<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>place_order</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        .page {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            background: #f8f8f8;
        }

        .address_container {
            display: flex;
            flex-direction: column;
            background-color: white;
        }

        .address_box {
            display: flex;
            flex-direction: row;
            align-items: center;
            min-height: 85px;
            margin: 15px;
            border: 1px solid #f5f5f5;
            border-radius: 4px;
        }

        .address_img {
            width: 32px;
            height: 32px;
            margin-left: 10px;
        }

        .address_wrap {
            justify-content: center;
            flex: 1;
            margin: 0 15px;
        }

        .noaddress {
            font-size: 15px;
            color: #333333;
        }

        .address_tit {
            display: flex;
            flex-direction: row;
        }

        .address_name {
            font-size: 15px;
            color: #333333;
        }

        .flex1 {
            flex: 1;
        }

        .address_phone {
            margin-top: 2px;
            font-size: 13px;
            color: #777777;
        }

        .address_details {
            margin-top: 5px;
            font-size: 12px;
            color: #333333;
        }

        .address_gor {
            width: 14px;
            height: 14px;
            margin-right: 10px;
        }

        .list_box {
            margin-top: 8px;
            background: white;
        }

        .list_count {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            height: 44px;
            padding: 0 15px;
        }

        .list_zi {
            font-size: 14px;
            color: #333333;
        }

        .list_all {
            font-size: 14px;
            color: #fe904a;
        }

        .order-goods-page {
            background-color: white;
        }

        .order-goods-item {
            display: flex;
            flex-direction: row;
            padding-bottom: 15px;
            margin: 15px 15px 0;
            border-bottom: 1px solid #f8f8f8;
        }

        .order-goods-img {
            width: 90px;
            height: 68px;
            margin-right: 12px;
            border-radius: 4px;
        }

        .order-goods-right {
            align-content: center;
            flex: 1;
        }

        .order-goods-title {
            font-size: 14px;
            color: #333333;
        }

        .order-goods-guige-box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: 5px;
        }

        .order-goods-guige,
        .order-goods-num {
            font-size: 12px;
            color: #999999;
        }

        .order-goods-bottom {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }

        .order-goods-price {
            font-size: 14px;
            color: #fe904a;
        }

        .order-goods-btn {
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin-left: 8px;
            border-radius: 2px;
            font-size: 14px;
            padding: 0 3px;
        }

        .order-goods-btn-gray {
            background-color: white;
            border: 1px solid #b5b5b5;
            color: #999999;
        }

        .order-goods-btn-orange {
            background-color: #ff7037;
            color: white;
        }

        .ge_box {
            padding: 0 15px;
            margin-top: 8px;
            background-color: white;
        }

        .ge_list {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            height: 55px;
        }

        .border-bottom {
            border-bottom: 1px solid #f8f8f8;
        }

        .ge_zi {
            font-size: 16px;
            color: #393f44;
        }

        .ge_rzi {
            font-size: 14px;
            color: #979ea6;
        }

        .bei_zi {
            font-size: 14px;
            margin-left: 15px;
            margin-top: 15px;
            margin-bottom: 4px;
            color: #6c7279;
        }

        .bei_box {
            height: 122px;
            padding: 14px 15px;
            margin-bottom: 10px;
            background-color: white;
        }

        .bei_area {
            width: auto;
            height: 100%;
            border: none;
        }

        .footer-btn {
            background-color: white;
        }

        .floor_btns {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            height: 54px;
        }

        .floor_zi {
            font-size: 13px;
            margin-right: 10px;
            color: #999999;
        }

        .floor_rzi {
            font-size: 14px;
            color: #333333;
        }

        .floor_szi {
            font-size: 14px;
            color: #fe5c00;
        }

        .floor_mzi {
            font-size: 18px;
            color: #fe5c00;
            margin-right: 15px;
        }

        .floor_btn {
            width: 100px;
            height: 40px;
            border-radius: 2px;
            margin-right: 15px;
            line-height: 40px;
            text-align: center;
            font-size: 16px;
            background-color: #ff7037;
            color: white;
        }

        .floor_btn:active {
            opacity: 0.7;
        }
        .flex-auto {
            flex: auto;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="nav-bar">
            <div onclick="back()" class="nav-bar-back">
                <img src="../images/back/back.png" alt="back" class="nav-bar-back-icon" />
                <span class="nav-bar-back-text">返回</span>
            </div>
            <span class="nav-bar-title">立即购买</span>
        </div>
        <div class="scroll-view-y flex-auto">
            <!-- 收货地址 -->
            <div class="address_container">
                <div class="address_box">
                    <img class="address_img" src="../images/main1/address.png"/>
                    <div class="address_wrap">
                        <!-- 配送 -->
                        <div class="address_cont">
                            <div class="address_tit">
                                <span class="address_name">收货人：测试昵称</span>
                                <div class="flex1"></div>
                                <span class="address_phone">17733553558</span>
                            </div>
                            <span class="address_details">北京市,北京市,东城区幸福小区</span>
                        </div>
                    </div>
                    <img class="address_gor" src="../images/main4/gor2.png"/>
                </div>
            </div>
            <!-- 商品信息 -->
            <div class="good-info">
                <div class="list_box">
                    <!-- 用于循环的对象 -->
                    
                </div>
            </div>
            <!-- 配送方式 -->
            <div class="delivery">
                <div class="ge_box">
                    <div class="ge_list border-bottom">
                        <span class="ge_zi">配送方式</span>
                        <span class="ge_rzi">配送</span>
                    </div>
                    <div class="ge_list">
                        <span class="ge_zi">运费</span>
                        <span class="ge_rzi">+￥666</span>
                    </div>
                </div>
            </div>
            <!-- 备注 -->
            <div class="remark">
                <!-- 备注 -->
                <span class="bei_zi">备注</span>
                <div class="bei_box">
                    <textarea class="bei_area" id="beizhu" value=""
                        placeholder="备注信息"></textarea>
                </div>
            </div>

        </div>
        <!-- 底部按钮 -->
        <div class="footer-btn">
            <div class="floor_btns">
                <span class="floor_zi">共 1 件</span>
                <span class="floor_rzi">合计：</span>
                <span class="floor_szi">¥</span>
                <span class="floor_mzi">666</span>
                <span class="floor_btn" onclick="pay()">去支付</span>
            </div>
        </div>
    </div>
</body>
<script src="../script/api.js"></script>
<script>
    apiready = function () {
        $api.fixStatusBar($api.dom('.nav-bar'));
    }

    function back() {
        api.closeWin();
    }

    let goodsData =  [{
                "title": "夏新款套装女洋气时尚短裤阔腿裤",
                "image": "../images/linkImg/3ee90482ef5b13bdbd9e9dc3f79f495e.png",
                "price": 699,
                "ku_num": 995,
                "delprice": 1236,
                "key": "白色/S码",
                "buynum": 1
            }]

    getGoodsContent()
    function getGoodsContent() {
        let str = '';
        goodsData.forEach(item => {
            str += `
            <div class="order-goods-page">
                <div class="order-goods-item">
                    <img class="order-goods-img" src="${item.image}" mode="aspectFill" />
                    <div class="order-goods-right">
                        <span class="order-goods-title">${item.title}</span>
                        <div class="order-goods-guige-box">
                            <span class="order-goods-guige">${item.key ? ' '+item.key : '默认规格'}</span>
                            <span class="order-goods-num">${'x'+(item.buynum)}</span>
                        </div>
                    </div>
                </div>
                <div class="list_count">
                    <span class="list_zi">小计</span>
                    <span class="list_all">${'¥' + item.price}</span>
                </div>
            </div>
            `
        })
        document.querySelector('.list_box').innerHTML = str;

    }


   function pay() {
       api.toast({
           msg:'模拟支付',
           location: 'middle'
       })
   } 
</script>

</html>